import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Fk.RoomElement

Item {
  id: root
  anchors.fill: parent
  property string generalName: "liubei"
  property string skillName

  Rectangle {
    id: mask
    anchors.fill: parent
    color: "black"
    opacity: 0.5
  }

  GridLayout {
    id: bg1
    columns: 15
    columnSpacing: 30
    rowSpacing: 20
    y: (root.height - height) / 2 - 0
    x: -350
    opacity: 0
    Repeater {
      model: ListModel {
        id: bgtxt1
      }
      Text {
        text: name
        color: "white"
        font.pixelSize: 30
        font.family: fontLibian.name
      }
    }
  }

  GridLayout {
    id: bg2
    columns: 15
    columnSpacing: 30
    rowSpacing: 20
    y: (root.height - height) / 2 - 25
    x: -200
    opacity: 0
    Repeater {
      model: ListModel {
        id: bgtxt2
      }
      Text {
        text: name
        color: "white"
        font.pixelSize: 30
        font.family: fontLibian.name
      }
    }
  }

  GeneralCardItem {
    id: herocard
    name: generalName
    scale: 2.7
    x: root.width + 140
    anchors.verticalCenter: parent.verticalCenter
    opacity: 0
    detailed: false
  }

  Text {
    topPadding: 5
    id: skill
    text: luatr(skillName)
    font.family: fontLi2.name
    font.pixelSize: 40
    x: root.width / 2 + 100
    y: root.height + 300
    color: "snow"
    opacity: 0
    scale: 3
    style: Text.Outline
  }

  ParallelAnimation {
    running: true
    PropertyAnimation {
      target: bg1
      property: "x"
      to: -150
      duration: 2000
    }

    PropertyAnimation {
      target: bg2
      property: "x"
      to: -400
      duration: 2000
    }
  }

  SequentialAnimation {
    id: anim
    running: false

    ParallelAnimation {
      PropertyAnimation {
        targets: [ herocard, skill, bg1, bg2 ]
        property: "opacity"
        to: 1
        duration: 500
      }

      PropertyAnimation {
        target: herocard
        property: "scale"
        to: 3.3
        duration: 500
      }

      PropertyAnimation {
        target: herocard
        property: "x"
        to: (root.width - herocard.width) / 2 - 40
        duration: 500
        easing.type: Easing.InQuad
      }

      PropertyAnimation {
        target: skill
        property: "y"
        to: root.height / 2 + 120
        duration: 500
      }
    }

    ParallelAnimation {
      PropertyAnimation {
        target: herocard
        property: "x"
        to: (root.width - herocard.width) / 2 - 120
        duration: 1000
      }

      PropertyAnimation {
        target: skill
        property: "y"
        to: root.height / 2 + 80
        duration: 1000
      }
    }

    ParallelAnimation {
      PropertyAnimation {
        targets: [ herocard, skill, mask, bg1, bg2 ]
        property: "opacity"
        to: 0
        duration: 500
      }

      PropertyAnimation {
        target: herocard
        property: "scale"
        to: 2.7
        duration: 500
      }

      PropertyAnimation {
        target: herocard
        property: "x"
        to: -100 - herocard.width
        duration: 500
        easing.type: Easing.OutQuad
      }

      PropertyAnimation {
        target: skill
        property: "y"
        to: -300
        duration: 500
        easing.type: Easing.OutQuad
      }
    }

    onFinished: {
      roomScene.bigAnim.source = "";
    }
  }

  function loadData(data) {
    generalName = data.general;
    skillName = data.skill_name;

    const txts = getLines(skillName, generalName);
    console.log(txts.toString());
    const length = txts.length
    for (let i = 0; i < txts.length; i++) {
      bgtxt1.append({
        name: txts[i]
      });
      bgtxt2.append({
        name: txts[length - i - 1]
      });
    }

    anim.running = true;
  }

  function getLines(skillName, generalName) {
    const total = 60;
    let txt = [];
    for (let index = 1; index <= total; index++) {
      let o = "$" + skillName + "_" + generalName + index;
      let p = luatr(o);
      if (o !== p) {
        txt.push(p);
      } else {
        o = "$" + skillName + index;
        p = luatr(o);
        if (o === p) {
          break;
        } else {
          txt.push(p);
        }
      }
    }

    if (txt.length == 0) {
      const df = new Array(total);
      df.fill("Ultimate Skill Invoked!");
      return df;
    }

    for (let i = 1; i < txt.length; i ++) {
      const rnd = Math.floor(Math.random() * (i + 1));
      const tmp = txt[i];
      txt[i] = txt[rnd];
      txt[rnd] = tmp;
    }

    if (txt.length < total) {
      const length = txt.length;
      const diff = total - length;
      for (let j = 0; j < diff; j++) {
        txt.push(txt[j % length]);
      }
    }
    return txt;
  }
}
